<template>
	<div class="freight-container">
		<el-form class="el_form" style="display: flex; justify-content: flex-start; padding: 10px 10px 10px 0">
			<el-button type="primary" @click="openAddFreight">新增运费模板</el-button>
		</el-form>
		<table-components :tableLoading="tableLoading" :tableData="tableData">
			<el-table-column prop="name" label="运费模板名称" align="center" />
			<el-table-column prop="baseFreight" label="基础运费 / 元" align="center" />
			<!-- <el-table-column prop="additionalFreight" label="特殊地区附加运费 / 元" align="center" /> -->
			<el-table-column prop="weight" label="运费模板排序" align="center" />
			<el-table-column label="操作" align="center">
				<template v-slot="scope">
					<el-button type="text" @click="openEdit(scope.row)">编辑</el-button>
					<el-button type="text" @click="freightDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</table-components>

		<AddFreight :isAdd="isAdd" :dialogVisible="addFreightVisible" :row="clickItem" @handleClose="addFreightClose" />
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import TableComponents from '/@/components/tableComponents/index.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import AddFreight from './dialog/addFreight.vue';
import { cityList, freightList, freightAddOrEdit, freightDel } from '/@/api/api';

// const cascaderRef = ref();
const isAdd = ref(false);
const tableLoading = ref(true);
const addFreightVisible = ref(false);
const clickItem = ref({});
const tableData = reactive({
	total: 0,
	page: 1,
	size: 20,
	data: [],
});

onMounted(() => {
	getFreightList();
});

// 获取模板列表
const getFreightList = async () => {
	// freightList
	tableLoading.value = true;
	let par = {
		page: tableData.page,
		size: tableData.size,
	};
	let { code, data } = await freightList(par);
	if (code == 200) {
		tableData.data = data.list;
		tableData.total = data.total;
		tableLoading.value = false;
	}
};

// 打开弹窗
const openAddFreight = () => {
	isAdd.value = true;
	clickItem.value = {};
	addFreightVisible.value = true;
};

// 关闭弹框
const addFreightClose = () => {
	addFreightVisible.value = false;
	getFreightList();
};

// 删除运费模板
const freightDelete = (item) => {
	ElMessageBox.confirm(`确定要删除该模板吗？`, '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		const { code } = await freightDel({ id: item.id });
		if (code === 200) {
			ElMessage.success('删除成功');
			getFreightList();
		}
	});
};

// 编辑
const openEdit = (item) => {
	isAdd.value = false;
	clickItem.value = {
		...item,
		cityList: item.cityList.map((ele) => +ele),
	};
	addFreightVisible.value = true;
};
</script>

<style lang="scss" scoped>
.freight-container {
	padding: 20px;
}
</style>
